<script lang="ts" setup>
withDefaults(
  defineProps<{
    visible?: boolean;
    fixed?: boolean;
  }>(),
  {
    visible: true,
    fixed: true
  }
);
</script>

<template>
  <view v-if="visible">
    <view
      id="apt-bottom-bar"
      :style="{
        position: fixed ? 'fixed' : 'static',
        bottom: 0,
        left: 0,
        right: 0,
        background: '#fff',
        boxShadow: '0 2px 8px 0 rgba(99, 99, 99, 0.2)'
      }"
    >
      <view class="py-3 px-4">
        <slot></slot>
      </view>
      <apt-safe-area />
    </view>
    <view v-if="fixed" style="height: 160rpx"></view>
  </view>
</template>
